import React, { memo, Suspense, useEffect } from "react";
import { HashRouter } from "react-router-dom";
import { renderRoutes } from "react-router-config";

import routes from "@/router"

import { useDispatch } from "react-redux"

import GHAppHeader from "@/components/app-header"
import GHAppFooter from "@/components/app-footer"
import { getUserDetailCommit, changeIsLogin } from "@/components/login/store/actionCreators"

export default memo(function GHMain() {
  const dispatch = useDispatch()
  const userId = localStorage.getItem('userId')
  if (userId) {
    dispatch(getUserDetailCommit(userId))
    dispatch(changeIsLogin(true))
  }

  console.log(renderRoutes(routes));
  return (
    <HashRouter>
      <GHAppHeader />
      <Suspense fallback={<div>loading</div>}>
        {renderRoutes(routes)}
      </Suspense>
      <GHAppFooter />
    </HashRouter>
  )
})